<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>登陆</title>
  <link href="/static/css/login.css" rel="stylesheet">
  <link href="/static/css/register.css" rel="stylesheet">

</head>

<body>

  <!--页面头部-->
  <div id="header">
    <!--导航栏-->
    <div class="headerInner">
      <!--三个导航链接-->
      <div class="header_nav">

      </div>
      <!--登录，注册按钮-->
      <div class="header_login_reg">
        <a href="/reg/">立即注册</a>

      </div>
      <!--网站logo-->
      <div class="header_logo">
        
          <img class="big_logo" src="/static/img/big_logo.png">
        
      </div>
    </div>
  </div>
  <!--登录注册框-->
  <div class="login_section">

    <!--登录，注册标题-->
    <div class="login_title">
      <ul>
        <li><a href="#" id="enter1" class="active" onclick="changeDiv('enter','register')">密码登录</a></li>
        <li><a href="#" id="register1" onclick="changeDiv('register','enter')">短信登录</a></li>
      </ul>
      <!--填写密码登录表单数据-->
      <div id="enter">
        <div>
          <input type="text" id="username" name="email" placeholder="账号名/邮箱/手机号" />
          <img class="user_logo" src="/static/img/idd.jpg">
          <img class="pwd_logo" src="/static/img/psd.jpg">
          <input id="password" type="password" placeholder="请输入登录密码" />
          <input type="button" value="登录" onclick="login_psd()" />
        </div>
        <!--其他方式登录-->
      </div>

      <!--填写短信登录表单数据-->
      <div class="register" id="register">
          <div>
          <img class="user_logo2" src="/static/img/phone.jpg">
          <input id="phone" type="text" placeholder="请输入手机号" onblur="checkphone()" /> <span id="error_phone" style="display:none;font-size:13px;color:orange">手机号格式错误！请重新输入</span>
          </div>
          <div class="zero">
          <img class="pwd_logo2" src="/static/img/code.jpg">
          <input id="msg" type="text" placeholder="请输入验证码" />
          <!-- <a href="#" class="code_place"> 获取验证码</a> -->
          <button id="count" class="code_place" onclick="send_msg()" >获取验证码</button>
          </div>
          <input type="button" value="登录" onclick="login_msg()"/>

      </div>
    </div>
  </div>

  <div class="footer">
    <table border="0" cellspcing="0" cellpadding="0">
      <tr>
        <td><a href="">阿里巴巴集团</a></td>
        <td><a href="">全球购</a></td>
        <td><a href="">淘宝网</a></td>
        <td><a href="">天猫</a></td>
        <td><a href="">聚划算</a></td>
        <td><a href="">一淘</a></td>
        <td><a href="">阿里妈妈</a></td>
        <td><a href="">飞猪</a></td>
        <td><a href="">虾米</a></td>
        <td><a href="">阿里云计算</a></td>
        <td><a href="">支付宝</a></td>
        <td><a href="">联系我们</a></td>
      </tr>
    </table>
  </div>


  <script>
    function changeDiv(show, hidden) {
      window.event.returnValue = false;
      //显示传入参数show中的内容
      document.getElementById(show).style.display = "block";
      document.getElementById(show + '1').style['border-bottom'] = "2px solid #404040";
      document.getElementById(show + '1').style.color = "#404040";
      //隐藏传入参数hidden中的内容
      document.getElementById(hidden).style.display = "none";
      document.getElementById(hidden + '1').style.border = "none";
      document.getElementById(hidden + '1').style.color = "#9b9b9b";
    }
    function checkphone(){
          var re = /^1[3,4,5,6,7,8,9][0-9]{9}$/;
          phone = document.getElementById("phone").value
          if (!re.test(phone)) {
              document.getElementById("error_phone").style.display = "block";
              document.getElementById('phone').value = '';
          }else{
            document.getElementById("error_phone").style.display = "none";
          }
    }


<!--    ajax发送异步请求   账号密码登陆-->
      function login_psd(){
			//发送请求给后台并传参
			//1.创建请求对象
			var htp = new XMLHttpRequest();
			//绑定监听事件
			htp.onreadystatechange = function(){
				if (this.readyState==4&&this.status==200) {
					//console.log(this.responseText)
					alert(this.responseText)
					if (this.responseText=='登陆成功！'){
					    window.location = 'http://127.0.0.1:8000/loginsuccess'
					}else{
					<!--清空输入框-->
					document.getElementById('username').value = '';
					document.getElementById('password').value = '';
					}
				}
			}
			//前端传参 DOM操作 获取节点元素 用户名 密码 手机号
			var username = document.getElementById('username').value;
			var userpsd = document.getElementById('password').value;

			//3.设置请求信息 参数请求方式 路由 是否为异步 默认true
			//post方式请求 发送参数 需要设置请求的头部信息
			htp.open('POST','/loginpsd/');
			htp.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
			//发送请求
			htp.send('username='+username+'&userpsd='+userpsd);
	}
	<!--发送验证码-->
	<!--document.getElementById("count").addEventListener("click", send_msg);-->
	function send_msg(){
			//发送请求给后台并传参
			//1.创建请求对象
			var htp = new XMLHttpRequest();
			//绑定监听事件
			htp.onreadystatechange = function(){
				if (this.readyState==4&&this.status==200) {
					//console.log(this.responseText)
					alert(this.responseText)
					if (this.responseText=='手机号未注册 验证码发送失败！'){
					    document.getElementById('phone').value = '';
					    document.getElementById('msg').value = '';
					}
					if (this.responseText=='验证码发送成功'){
					  //按钮倒计时
					  countdown();
					}
				}
			}
			//前端传参 DOM操作 获取节点元素
			var phone = document.getElementById('phone').value;
			var msg = document.getElementById('msg').value;

			//3.设置请求信息 参数请求方式 路由 是否为异步 默认true
			//post方式请求 发送参数 需要设置请求的头部信息
			htp.open('POST','/sendmsg/');
			htp.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
			//发送请求
			htp.send('phone='+phone+'&msg='+msg);
	}
	<!--验证码登陆-->
	function login_msg(){
			//发送请求给后台并传参
			//1.创建请求对象
			var htp = new XMLHttpRequest();
			//绑定监听事件
			htp.onreadystatechange = function(){
				if (this.readyState==4&&this.status==200) {
					//console.log(this.responseText)
					alert(this.responseText)
					if (this.responseText=='登陆成功！'){
					    window.location = 'http://127.0.0.1:8000/loginsuccess'
					}else{
					<!--清空输入框-->
					document.getElementById('msg').value = '';
					}
				}
			}
			//前端传参 DOM操作 获取节点元素 手机号 验证码
			var phone = document.getElementById('phone').value;
			var msg = document.getElementById('msg').value;

			//3.设置请求信息 参数请求方式 路由 是否为异步 默认true
			//post方式请求 发送参数 需要设置请求的头部信息
			htp.open('POST','/loginmsg/');
			htp.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
			//发送请求
			htp.send('phone='+phone+'&msg='+msg);
	}

	<!--按钮倒计时-->.
	function countdown(){
			var _count = document.getElementById("count"); //获取验证码按钮
			var time = 59;
			// 注册单击事件
				// 禁用按钮
				_count.disabled = true;
				// 开启定时器
				var timer = setInterval(function() {
					// 判断剩余秒数
					if (time == 0) {
		 			// 清除定时器和复原按钮
						clearInterval(timer);
						_count.disabled = false;
						_count.innerHTML = '获取验证码';
					} else {
						_count.innerHTML = `${time}秒后重新获取`;
						time--;
					}
			},1000);
	}







  </script>

</body>

</html>